<template>
  <el-dialog
    title="题目预览"
    :visible.sync="showDialog"
    width="50%"
    show-close
    :before-close="handleClose">

        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"> <span>【题型】：{{question.questionType | formatData}}</span> </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"><span>【编号】：{{question.id }}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div><span>【难度】：{{question.difficulty | formatData}}</span></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"><span>【标签】：{{question.tags}}</span></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"> <span>【学科】：{{question.subjectName}}</span> </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"><span>【目录】：{{question.directoryName}}</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div><span>【方向】：{{question.direction}}</span></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <hr />
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span>【题干】：</span></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span style="color:blue;" v-html="question.question"></span></div></el-col>
        </el-row>
        <el-row v-show="question.questionType === '单选' || question.questionType === '多选'">
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span>{{question.questionType}}题 选项：（以下选中的选项为正确答案）</span></div></el-col>
        </el-row>
        <el-row v-for="item,index in question.options" :key="index">
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span>
                <el-radio v-if="question.questionType === '单选'" :value="item.code" :label="item.isRight===1 ? item.code : 0" >{{item.title}}</el-radio>
                <el-checkbox v-if="question.questionType === '多选'" :value="item.isRight === 1" >{{item.title}}</el-checkbox>
                </span></div></el-col>
        </el-row>
        <hr />
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span>【参考答案】：<el-button type="danger" size="small" @click="isShowVideo = true">视频答案预览</el-button>
            <br />
            <video v-show="isShowVideo" :src="question.videoURL" controls="controls" autoplay></video>
            </span></div></el-col>
        </el-row>
        <hr />
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span v-html="`【答案解析】：${question.answer}`"></span></div></el-col>
        </el-row>
        <hr />
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span>【题目备注】：{{question.remarks}}</span></div></el-col>
        </el-row>

    <span slot="footer" class="dialog-footer">
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"><span>
            <el-button class="close-button" type="primary" @click="$emit('close')">关闭</el-button>
            </span></div></el-col>

        </el-row>
    </span>
  </el-dialog>
</template>

<script>
import {
  questionType,
  difficulty
} from '@/api/hmmm/constants'
export default {
  name: 'TestQuestionsDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    question: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      isShowVideo: false // 是否显示视频
    }
  },
  methods: {
    //   点击关闭按钮触发的事件方法
    handleClose () {
      this.$emit('close')
    }
  },
  filters: {
    formatData (data) {
      questionType.forEach(q => {
        if (Number(data) === q.value) {
          data = q.label
        }
      })
      // 格式化难度

      difficulty.forEach(q => {
        if (Number(data) === q.value) {
          data = q.label
        }
      })
      return data
    }
  }
}
</script>

<style scoped>
.el-row {
    line-height: 30px;
}
.close-button {
    float: right;
}
::v-deep p {
    margin: 0;
    display: inline-block;
}
::v-deep pre.ql-syntax {
    margin: 0;
}
video {
    width: 400px;
    height: 300px;
}
</style>
